<template>
    <div class="page_title">
        <p>资产汇总</p>
        <el-button type="primary" @click="add_assets">资产登记</el-button>
    </div>
    <el-form class="search" label-position='left' :model="form">
        <el-form-item label="资产编号">
            <el-input v-model="form.asset_number" placeholder="请输入资产编号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="search">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="list">
        <el-table-column label="编辑">
            <template #default="scope">
                <span class="details" @click="edit(scope.row)">编辑</span>
            </template>
        </el-table-column>
        <el-table-column label="资产编号" prop="asset_number"></el-table-column>
        <el-table-column label="单位名称" prop="company_name"></el-table-column>
        <el-table-column label="资产大类" prop="one_category"></el-table-column>
        <el-table-column label="资产小类" prop="tow_category"></el-table-column>
        <el-table-column label="资产名称" prop="asset_name"></el-table-column>
        <el-table-column label="资产状态">
            <template #default="scope">
                <div v-for="item in status" :key="item.value">
                    <span v-if="scope.row.is_status === item.value">{{item.label}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brand"></el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column label="数量" prop="num"></el-table-column>
        <el-table-column label="计量单位" prop="unit"></el-table-column>
        <el-table-column label="生产时间" prop="time_produce"></el-table-column>
        <el-table-column label="购置时间" prop="time_buy"></el-table-column>
        <el-table-column label="入账时间" prop="time_add"></el-table-column>
        <el-table-column label="折旧年限(月)">
            <template #default="scope">
                <span v-if="scope.row.is_depreciation">{{scope.row.depreciation_num}}</span>
                <span v-else>不算折旧</span>
            </template>
        </el-table-column>
        <el-table-column label="总价(元)" prop="total_price"></el-table-column>
    </el-table>
    <el-pagination
        @size-change="size_change"
        @current-change="current_change"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_count"
    >
    </el-pagination>
    <empty :is_empty='is_empty' @empty='is_empty = false'></empty>
    <vassets
        :is_assets='is_assets'
        :type='type'
        :class_list='class_list'
        :status='status'
        :unit_list='unit_list'
        :info='info'
        @close='close'
        @add_assets='add_assets_sub'
        @del_assets='del_assets'
        @edit_assets='edit_assets'
    ></vassets>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { get_class, get_asset, unit_statistics, add_asset, del_asset, edit_asset } from './../../utils/api'
import { time } from './../../utils/time'
import empty from './../../components/empty.vue'
import vassets from './../../components/assets.vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        let state = reactive({
            status: [{
                label: '再用',
                value: 1
            }, {
                label: '闲置',
                value: 2
            }, {
                label: '故障',
                value: 3
            }, {
                label: '处理',
                value: 4
            }],
            form: {
                page: 1,
                pagesize: 10,
                asset_number: undefined
            },
            class_list: [],
            unit_list: [],
            total_count: 0,
            list: [],
            is_empty: false,
            is_assets: false,
            type: 2,
            info: {}
        })
        const close = () => {
            state.info = {}
            state.is_assets = false
        }
        // 获取单位
        const get_unit = () => {
            unit_statistics().then(({ data }) => {
                state.unit_list = data.data
            })
        }
        // 获取资产
        const init = () => {
            get_asset(state.form).then(({ data }) => {
                if(data.code === 1000) {
                    data.data.data.forEach(item => {
                        item.time_produce = time(item.produce_time)
                        item.time_buy = time(item.buy_time)
                        item.time_add = time(item.add_time)
                        state.class_list.forEach(classof => {
                            classof.down.forEach(down => {
                                if(item.category_id === down.category_id) {
                                    item.one_category = classof.category_name
                                    item.tow_category = down.category_name
                                }
                            })
                        })
                    })
                    state.list = data.data.data
                    state.total_count = data.data.total_count
                    if(!data.data.data.length) {
                        state.is_empty = true
                    }
                }
            })
        }
        // 获取分类
        get_class().then(({ data }) => {
            if(data.code === 1000) {
                state.class_list = data.data
                init()
            }
        })
        // 分页
        const size_change = size => {
            state.form.page = 1
            state.form.pagesize = size
            init()
        }
        const current_change = page => {
           state.form.page = page
           init()
           window.scrollTo(0, 0)
        }
        // 搜索
        const search = () => {
            state.form.page = 1
            init()
        }
        // 编辑
        const edit = item => {
            state.info = item
            state.is_assets = true
            state.type = 3
        }
        const edit_assets = val => {
            edit_asset(val).then(({ data }) => {
                if(data.code === 1000) {
                    state.is_assets = false
                    ElMessage.success({
                        type: 'success',
                        message: data.msg
                    })
                    init()
                }
            })
        }
        // 资产登记
        const add_assets = () => {
            state.is_assets = true
            state.type = 2
        }
        const add_assets_sub = val => {
            add_asset(val).then(({ data }) => {
                if(data.code === 1000) {
                    state.is_assets = false
                    ElMessage.success({
                        type: 'success',
                        message: data.msg
                    })
                    init()
                }
            })
        }
        // 删除资产
        const del_assets = id => {
            del_asset({id}).then(({ data }) => {
                if(data.code === 1000) {
                    state.is_assets = false
                    ElMessage.success({
                        type: 'success',
                        message: data.msg
                    })
                    init()
                }
            })
        }

        if(state.type === 2) {
            get_unit()
        }
        return {
            ...toRefs(state),
            size_change,
            current_change,
            search,
            edit,
            add_assets,
            add_assets_sub,
            del_assets,
            edit_assets,
            close
        }
    },
    components: {
        empty,
        vassets
    }
})
</script>

<style lang="scss" scoped>
.page_title{
    display: flex;
    justify-content: space-between;
    p{
        align-self: center;
    }
}
.search{
    display: flex;
    .el-form-item{
        width: 300px;
        margin-right: 20px;
        &:last-child{
            align-self: flex-end;
        }
    }
}
.details{
    cursor: pointer;
    color: #d98e9b;
}
</style>